import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getSizeImage } from "@/utils/format-utils";
import UserInfoCop from "@/components/user/userInfoCop";
import { myUserDetailAction } from "../store/actionTypes";

export default memo(function FriendRight(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(myUserDetailAction(props.userid));
  }, [dispatch, props.userid]);

  const { myInfo } = useSelector(
    (state) => ({
      myInfo: state.getIn(["myEvent", "myUserInfo"]),
    }),
    shallowEqual
  );

  const userID = myInfo.code === 200 ? myInfo.profile.userId : "";

  return (
    <div className="friend-right">
      <div className="myInfo">
        <div className="info-img">
          <img
            src={getSizeImage(
              myInfo.code === 200 ? myInfo.profile.avatarUrl : "",
              62
            )}
            alt=""
          />
          <h5>{myInfo.code === 200 ? myInfo.profile.nickname : ""}</h5>
          <p>{myInfo.code === 200 ? myInfo.profile.signature : ""}</p>
        </div>
        <UserInfoCop myInfo={myInfo} userID={userID} />
      </div>
    </div>
  );
});
